<template>
	<view id="register">
		<image src="@/static/xyc/bggg.png" class="imgBg" />
		<image src="@/static/index/tip.png" class="imgTip" v-if="showTip" />
		<view class="appInfo" :style="showTip ? top20 : top10">
			<view class="name">珺璟</view>
			<image src="@/static/xyc/logo.png" class="logo" />
			<view class="download m-t-60" v-if="!showTip" @click="downLoadApp(1)">
				<image src="@/static/index/android.png" class="android" />
				<text class="m-l-10">Android版下载</text>
			</view>
		<!-- 	<view class="download m-t-40" v-if="!showTip" @click="downLoadApp(2)">
				<image src="@/static/index/ios.png" class="android" />
				<text class="m-l-10">ios版下载</text>
			</view> -->
		</view>
	</view>
</template>

<script>
import { lastVersion } from '@/common/api/api.js'
	export default {
		data() {
			return {
				showTip:false,
				downloadUrl: null,
				top10:'top:10%',
				top20:'top:20%',
			}
		},
		onShow(){
			let bool = this.isWechat()
			if(bool){
				this.showTip = true
			}
		},
		methods: {
			// 1安卓 2ios
			downLoadApp(num) {
				// 获取下载文件路径
				lastVersion(num).then(res => {
					if(res.code == 200){
						this.downloadUrl = res.data.downloadUrl;
						if(this.bool){
							this.showTip = true
						}else{
							window.location.href = this.downloadUrl
						}
					}
				})
			},
			isWechat() {
				return /MicroMessenger/i.test(window.navigator.userAgent);
			}
		}
	}
</script>

<style lang="scss" scoped>
.imgBg{
	width: 100%;
	height: 100vh;
	z-index: 10;
}
.imgTip{
	position: absolute;
	top: 0;
	left: 21%;
	width: 70%;
	height: 370rpx;
	z-index: 999;
}
.logo{
	width: 280rpx;
	height: 280rpx;
	margin: 0 auto 100rpx;
	border-radius: 20rpx;
}
.android{
	width: 40rpx;
	height: 40rpx;
	margin-top: 30rpx;
}
.name{
	width: 100%;
	font-size: 30px;
	color: #ECA52B;
	margin-top: 60rpx;
	margin-bottom: 40rpx;
	text-align: center;
	z-index: 999;
}
.appInfo{
	position: absolute;
	top: 18%;
	left: 0%;
	width: 100%;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.download{
	width: 480rpx;
	line-height: 100rpx;
	text-align: center;
	margin: 0 auto;
	border-radius: 100rpx;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	justify-content: center;
	color: #ffffff;
	background: #ECA52B;
}
.m-t-60{
	margin-top: 60rpx;
}
.m-t-40{
	margin-top: 40rpx;
}
</style>